/***  获取验证码的组件封装 */
<template>
        <div class="vcode">
            <input type="text" v-model="vcode">
            <span v-show="!showVcode" @click = "getVcodes">{{ vcodeText }}</span>
            <span v-show="showVcode">{{ counts }}s</span>
        </div>
</template>
<script> 
export default {
    props:['isGetVcode'],
    data(){
        return {
           showVcode: false,
           counts: '',
           timers: null,
           vcodeText: '获取验证码',
           vcode: '',
        }
    },
    methods: {
        getVcodes(){
            const _this = this;
            const VCODE_COUNT = 60;
            if(!_this.timers){
                _this.counts = VCODE_COUNT;
                _this.showVcode = true;
                _this.timers = setInterval(()=>{
                     if(_this.counts<=60 && _this.counts>0){
                         _this.counts--;
                     }else{
                         clearInterval(_this.timers)
                         _this.timers = null;
                         _this.showVcode = false;
                         _this.vcodeText = '重新获取'
                     }
                },1000) 
            }
        }
    },
    watch: {
       isGetVcode(val) {
           this.showVcode = val  //监听父组件传过来的值
       }
    }
}
</script>
<style lang="stylus" scoped>
.wrapper{
    width 100%  
    height 100%
}
.vcode{
    height: .8rem
    width: 70%
    border 1px solid #fff
    border-radius .2rem
}
.vcode>input{
    width 50%
    padding-left 6%
    height .8rem
    line-height .8rem
    color #ffffff
    background transparentify
    border none 
}
.vcode>span{
    display inline-table
    line-height .8rem
    width 42% 
    font-size .32rem
    height: .8rem
    color #fff
    text-align center
}
</style>


